<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select v-model="status" style="width:100%" placeholder="请选择状态">
                                    <el-option label="禁用" value="1"></el-option>
                                    <el-option label="正常" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
            <div slot="bottom">
                <el-button type="primary" plain @click="showDialog">新增</el-button>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="80" prop="id" v-if="columns[0].show"/>
            <el-table-column label="页面宽度" width="120" prop="width" v-if="columns[1].show"/>
            <el-table-column label="页面高度" width="120" prop="height" v-if="columns[2].show"/>
            <el-table-column label="照片x偏移" width="120" prop="image_x" v-if="columns[3].show"/>
            <el-table-column label="照片y偏移" width="120" prop="image_y" v-if="columns[4].show"/>
            <el-table-column label="照片宽度" width="120" prop="image_width" v-if="columns[5].show"/>
            <el-table-column label="照片高度" width="120" prop="image_height" v-if="columns[6].show"/>
            <el-table-column label="姓名x偏移" width="120" prop="name_x" v-if="columns[7].show"/>
            <el-table-column label="姓名y便宜" width="120" prop="name_y" v-if="columns[8].show"/>
            <el-table-column label="岗位x偏移" width="120" prop="post_x" v-if="columns[9].show"/>
            <el-table-column label="岗位y偏移" width="120" prop="post_y" v-if="columns[10].show"/>
            <el-table-column label="部门x偏移" width="120" prop="department_x" v-if="columns[11].show"/>
            <el-table-column label="部门y偏移" width="120" prop="department_y" v-if="columns[12].show"/>
            <el-table-column label="工号x偏移" width="120" prop="card_number_x" v-if="columns[13].show"/>
            <el-table-column label="工号y偏移" width="120" prop="card_number_y" v-if="columns[14].show"/>
            <el-table-column label="二维码x偏移" width="120" prop="qrcode_x" v-if="columns[15].show"/>
            <el-table-column label="二维码y偏移" width="120" prop="qrcode_y" v-if="columns[16].show"/>
            <el-table-column label="二维码宽度" width="120" prop="qrcode_width" v-if="columns[17].show"/>
            <el-table-column label="二维码高度" width="120" prop="qrcode_height" v-if="columns[18].show"/>
            <el-table-column label="模板背景" width="100" prop="background_image" v-if="columns[19].show">
                <template slot-scope="scope">
                    <img :src="scope.row.background_image" style="width: 60px;height: 50px;" @click="clickBig(scope.row.background_image)"/>
                </template>
            </el-table-column>
            <el-table-column label="字体大小" width="120" prop="font_size" v-if="columns[20].show"/>
            <el-table-column label="操作者" width="120" prop="admin_name" v-if="columns[21].show"/>
            <el-table-column label="状态" width="80" prop="status" v-if="columns[22].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <el-tag size="mini" type="success">正常</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">禁用</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="100" prop="remark" v-if="columns[23].show"/>
            <el-table-column label="创建时间" width="140" prop="create_time" v-if="columns[24].show"/>
            <el-table-column label="更新时间" width="140" prop="update_time" v-if="columns[25].show"/>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateModel(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteModel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
        <el-dialog title="编辑" width="40%" :visible.sync="dvEdit" :before-close="handleClose">
            <el-form ref="model" :model="model" label-width="80px">
                <el-form-item label="页面宽度">
                    <el-input v-model="model.width" type="number" placeholder="请输入页面宽度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="页面高度">
                    <el-input v-model="model.height" type="number" placeholder="请输入页面高度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="照片x偏移">
                    <el-input v-model="model.image_x" type="number" placeholder="请输入照片x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="照片y偏移">
                    <el-input v-model="model.image_y" type="number" placeholder="请输入照片y偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="照片宽度">
                    <el-input v-model="model.image_width" type="number" placeholder="请输入照片宽度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="照片高度">
                    <el-input v-model="model.image_height" type="number" placeholder="请输入照片高度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="姓名x偏移">
                    <el-input v-model="model.name_x" type="number" placeholder="请输入姓名x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="姓名y便宜">
                    <el-input v-model="model.name_y" type="number" placeholder="请输入姓名y便宜" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="岗位x偏移">
                    <el-input v-model="model.post_x" type="number" placeholder="请输入岗位x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="岗位y偏移">
                    <el-input v-model="model.post_y" type="number" placeholder="请输入岗位y偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="部门x偏移">
                    <el-input v-model="model.department_x" type="number" placeholder="请输入部门x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="部门y偏移">
                    <el-input v-model="model.department_y" type="number" placeholder="请输入部门y偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="工号x偏移">
                    <el-input v-model="model.card_number_x" type="number" placeholder="请输入工号x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="工号y偏移">
                    <el-input v-model="model.card_number_y" type="number" placeholder="请输入工号y偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="二维码x偏移">
                    <el-input v-model="model.qrcode_x" type="number" placeholder="请输入二维码x偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="二维码y偏移">
                    <el-input v-model="model.qrcode_y" type="number" placeholder="请输入二维码y偏移" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="二维码宽度">
                    <el-input v-model="model.qrcode_width" type="number" placeholder="请输入二维码宽度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="二维码高度">
                    <el-input v-model="model.qrcode_height" type="number" placeholder="请输入二维码高度" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="模板背景">
                    <span style="color:red">注意：只能上传jpg/png文件，建议尺寸400*400</span>
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadImage"
                      accept=".jpg,.png"
                      name="file"
                      :show-file-list="false"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :on-success="handleAvatarSuccess">
                        <img v-if="background_image" :src="background_image" style="width:200px;height: 200px;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="字体大小">
                    <el-input v-model="model.font_size" type="number" placeholder="请输入字体大小" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="model.remark" type="text" placeholder="请输入备注" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="model.status" style="width:100%" placeholder="请选择状态">
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dvEdit = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogBigVisible" width="60%">
            <img :src="bigSrc" style="width:100%;display: block">
        </el-dialog>
    </div>
</template>


<script>
    import {getSysSingleBadgeConfigList,editSysSingleBadgeConfig,deleteSysSingleBadgeConfig} from '@/api/basic/sysSingleBadgeConfigApi';
    import {uploadImageUrl} from "@/utils/config.js";

export default {
    data() {
        return {
            lists: [],
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            status: '',
            model: {},
            dvEdit: false,
            dialogBigVisible: false,
            bigSrc: '',
            uploadImage: uploadImageUrl,
            background_image: '',
            columns: [
                {name: "ID", show: true},
                {name: "页面宽度", show: true},
                {name: "页面高度", show: true},
                {name: "照片x偏移", show: true},
                {name: "照片y偏移", show: true},
                {name: "照片宽度", show: true},
                {name: "照片高度", show: true},
                {name: "姓名x偏移", show: true},
                {name: "姓名y便宜", show: true},
                {name: "岗位x偏移", show: true},
                {name: "岗位y偏移", show: true},
                {name: "部门x偏移", show: true},
                {name: "部门y偏移", show: true},
                {name: "工号x偏移", show: true},
                {name: "工号y偏移", show: true},
                {name: "二维码x偏移", show: true},
                {name: "二维码y偏移", show: true},
                {name: "二维码宽度", show: true},
                {name: "二维码高度", show: true},
                {name: "模板背景", show: true},
                {name: "字体大小", show: true},
                {name: "操作者", show: true},
                {name: "状态", show: true},
                {name: "备注", show: true},
                {name: "创建时间", show: true},
                {name: "更新时间", show: true},
            ],
        };
    },
    created: function () {
        this.handleCurrentChange(1);
    },
    methods: {
        clickBig: function (img) {
            this.bigSrc = img;
            this.dialogBigVisible = true;
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getSysSingleBadgeConfigList({
                page: index,
                status: this.status,
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        showDialog: function () {
            this.model = {};
            this.background_image = '';
            this.dvEdit = true;
        },
        updateModel: function (row) {
            this.model = row;
            this.background_image = row.background_image;
            this.dvEdit = true;
        },
        reset: function () {
            this.status = '';
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        handleClose: function (done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                    .catch(_ => {
                });
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
        onSubmit: function () {
            editSysSingleBadgeConfig({
                id: this.model.id,
                remark: this.model.remark,
                status: this.model.status,
                width: this.model.width,
                height: this.model.height,
                image_x: this.model.image_x,
                image_y: this.model.image_y,
                image_width: this.model.image_width,
                image_height: this.model.image_height,
                name_x: this.model.name_x,
                name_y: this.model.name_y,
                post_x: this.model.post_x,
                post_y: this.model.post_y,
                department_x: this.model.department_x,
                department_y: this.model.department_y,
                card_number_x: this.model.card_number_x,
                card_number_y: this.model.card_number_y,
                qrcode_x: this.model.qrcode_x,
                qrcode_y: this.model.qrcode_y,
                qrcode_width: this.model.qrcode_width,
                qrcode_height: this.model.qrcode_height,
                background_image: this.background_image,
                font_size: this.model.font_size,
                admin_name: this.model.admin_name,
            }).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dvEdit = false;
                    this.handleCurrentChange(this.current);
                }
            })
        },
       deleteModel: function (row) {
            this.$confirm("您确认要删除该条数据?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                deleteSysSingleBadgeConfig({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        handleAvatarSuccess: function (res, file) {
            this.background_image = res.data.src;
        },
        handleRemove: function (file, fileList) {
            this.background_image = '';
        },
        beforeRemove: function (file, fileList) {
            this.background_image = '';
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

input[type='file'] {
    display: none;
}

</style>

